<template>
    <el-dialog class="ui-license-set-dialog" v-model="dialogVisible" :modal="true" @closed="finalThings" title="营业执照上传">
        <el-form :rules="rules" ref="elForm" :model="data" size="small" label-width="9.5rem">
            <el-form-item label="营业执照:" prop="license_photo">
                <el-upload
                    class="avatar-uploader"
                    action="https://file.80mall.net"
                    :show-file-list="false"
                    :http-request="uploadFile"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    name="license_photo">
                    <img v-if="data.license_photo" :src="'https://timg.80mall.net/nb/' + data.license_photo" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="营业执照名称:" prop="license_name">
                        <el-input type="text" v-model="data.license_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="营业执照编号:" prop="license_number">
                        <el-input type="text" v-model="data.license_number"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="营业执照注册地址:" prop="license_address">
                <el-input type="text" v-model="data.license_address"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="法人身份证:" prop="idcard_front_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="idcard_front_photo">
                            <img v-if="data.idcard_front_photo" :src="'https://timg.80mall.net/nb/' + data.idcard_front_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">身份证正面</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="idcard_back_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="idcard_back_photo">
                            <img v-if="data.idcard_back_photo" :src="'https://timg.80mall.net/nb/' + data.idcard_back_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">身份证反面</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="user_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="user_photo">
                            <img v-if="data.user_photo" :src="'https://timg.80mall.net/nb/' + data.user_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">手持身份证</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="法人和联系人是否一致:" class="select">
                <el-radio-group v-model="data.checked">
                    <el-radio :label="true" size="large">是</el-radio>
                    <el-radio :label="false" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="!data.checked">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="联系人身份信息:" prop="contacts_idcard_front_photo" class="rules-info">
                            <el-upload
                                class="avatar-uploader"
                                action="https://file.80mall.net"
                                :show-file-list="false"
                                :http-request="uploadFile"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                name="contacts_idcard_front_photo">
                                <img v-if="data.contacts_idcard_front_photo" :src="'https://timg.80mall.net/nb/' + data.contacts_idcard_front_photo" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <plus />
                                    <span class="uploader-icon-title">身份证正面</span>
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="contacts_idcard_back_photo" class="rules-info">
                            <el-upload
                                class="avatar-uploader"
                                action="https://file.80mall.net"
                                :show-file-list="false"
                                :http-request="uploadFile"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                name="contacts_idcard_back_photo">
                                <img v-if="data.contacts_idcard_back_photo" :src="'https://timg.80mall.net/nb/' + data.contacts_idcard_back_photo" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <plus />
                                    <span class="uploader-icon-title">身份证反面</span>
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="contacts_user_photo" class="rules-info">
                            <el-upload
                                class="avatar-uploader"
                                action="https://file.80mall.net"
                                :show-file-list="false"
                                :http-request="uploadFile"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                name="contacts_user_photo">
                                <img v-if="data.contacts_user_photo" :src="'https://timg.80mall.net/nb/' + data.contacts_user_photo" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <plus />
                                    <span class="uploader-icon-title">手持身份证</span>
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="authorize_photo" class="rules-info">
                            <el-upload
                                class="avatar-uploader"
                                action="https://file.80mall.net"
                                :show-file-list="false"
                                :http-request="uploadFile"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                name="authorize_photo">
                                <img v-if="data.authorize_photo" :src="'https://timg.80mall.net/nb/' + data.authorize_photo" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <plus />
                                    <span class="uploader-icon-title">商户委托书</span>
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人姓名:" prop="contacts_name">
                            <el-input type="text" v-model="data.contacts_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人身份证号码:" prop="contacts_idcard">
                            <el-input type="text" v-model="data.contacts_idcard"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-form-item label="联系人手机号:" prop="tel">
                <el-input type="text" v-model="data.tel"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="box-row">
                <el-button v-if="!data.checked" type="danger" size="default" @click="onMandate(1)">下载商户委托书模板</el-button>
                <div style="flex: 1;"></div>
                <el-button type="primary" size="default" @click="onSure">确认</el-button>
                <el-button size="default" @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { reactive,toRefs } from "vue";
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { exportDocx } from '../../../uiframe/downTable'
import { uploader } from '../../../uiframe/extiio';
import axios from "axios";
import { idCardValidator,mobileValidator } from '../../../uiframe/validator';

export default {
    components: {
        Plus,
    },
    props:{
        q:Object,
        _compId:Number,
        done:Function,
        payload: Object
    },
    setup(props) {
        let p = Object.assign(JSON.parse(JSON.stringify(props.payload)))
        p.checked = p.contacts_name ? false : true;
        let data = reactive({
            dialogVisible: true,
            data:p,
            elForm:null,
            rules:{
                license_photo:[{ required: true, message: "营业执照不能为空.", trigger: "blur" }],
                license_number:[{ required: true, message: "营业执照编号不能为空.", trigger: "blur" }],
                license_name:[{ required: true, message: "营业执照名称不能为空.", trigger: "blur" }],
                license_address:[{ required: true, message: "营业执照注册地址不能为空.", trigger: "blur" }],
                idcard_front_photo:[{ required: true, message: "法人身份证正面不能为空.", trigger: "blur" }],
                idcard_back_photo:[{ required: true, message: "法人身份证反面不能为空.", trigger: "blur" }],
                user_photo:[{ required: true, message: "手持身份证不能为空.", trigger: "blur" }],
                contacts_idcard_front_photo:[{ required: true, message: "联系人身份证正面不能为空.", trigger: "blur" }],
                contacts_idcard_back_photo:[{ required: true, message: "联系人身份证反面不能为空.", trigger: "blur" }],
                contacts_user_photo:[{ required: true, message: "手持身份证不能为空.", trigger: "blur" }],
                tel:[
                    { required: true, message: "联系电话不能为空.", trigger: "blur" },
                    {validator: mobileValidator, trigger: 'blur' }
                ],
                contacts_name:[{ required: true, message: "联系人姓名不能为空.", trigger: "blur" }],
                contacts_idcard:[
                    { required: true, message: "联系人身份证号码不能为空.", trigger: "blur" },
                    {validator: idCardValidator, trigger: 'blur' }
                ],
                authorize_photo:[{ required: true, message: "商户委托书不能为空.", trigger: "blur" }],
            }
        });

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onSure:()=>{
                data.elForm.validate().then(ret => {
                    if(!ret) return;
                    axios.post('/netbar/license',data.data).then(({data:res})=>{
                        onmessage(res)
                        if(res.success){
                            props.q.resolve({success:true,message:'已保存', data: data.data});
                            data.dialogVisible = false
                        }
                    }).catch(res=>{
                        onmessage(res)
                    })
                })
            },
            onCancel: ()=>data.dialogVisible = false,
            finalThings: () =>props.done(props._compId),
            uploadFile: (upload) => {
                if(data.data.stage == 2){
                    onmessage({success:false,message:"审核后，不能再继续上传图片！"});
                    return false;
                }

                return new Promise((resolve, reject)=>{
                    uploader(upload.action, upload.file, 'netbar_license').then(({data:res})=>{
                        if(res.success){
                            data.data[upload.filename] = res.file;
                            resolve();
                        }else{
                            onmessage(res);
                            reject();
                        }
                    }).catch(e=>{
                        onmessage({success:false,message:"程序出错，请联系工作人员！"});
                        reject()
                    }).update(e=>{
                        upload.onProgress(e);
                    })
                })
            },
            onMandate:(i)=>{
                let url = i == 1 ? "/static/wt.docx" : "/static/settle.docx";
                exportDocx(url, {}, i == 1 ? `授权委托书.docx` : `结算账户收款确认书.docx`)
            }
        }

        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>
<style lang="scss">
.ui-license-set-dialog{
    max-width: 45rem;min-width: 45rem; width:45rem;
    margin-top: 5px;
    margin-bottom: 0;
    .el-dialog__body{
        padding: 0 .5rem;
        .select{
            .el-form-item__label{
                margin-top: 8px;
            }
        }
        .rules-info{
            .el-form-item__error{
                width: 150px;    
            }
        }
        .el-form-item{
            margin-bottom: 15px;    
        }
    }
    .license{
        margin: 1rem 0 1rem 2rem;
    }
}
.avatar-uploader{
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .uploader-icon-title{
        font-size: 14px;
        font-style: initial;
    }
}
</style>